<!--
 * @Author: 九璃怀特 1599130621@qq.com
 * @Date: 2023-12-25 11:44:19
 * @LastEditors: 九璃怀特 1599130621@qq.com
 * @LastEditTime: 2023-12-25 13:40:59
 * @FilePath: \zxi-surface-guide\src\components\BaseUI\drawer\drawer.vue
 * @Description: 
 -->

<script setup lang="ts">
import { computed } from "vue";

const props = withDefaults(
  defineProps<{
    modelValue: boolean;
  }>(),
  {}
);

const emit = defineEmits<{
  (e: "update:modelValue", result: boolean): void;
}>();

const show = computed({
  get: () => props.modelValue,
  set: (v) => {
    emit("update:modelValue", v);
  },
});
</script>

<template>
  <Transition>
    <div class="pm-drawer" v-show="show">
      <div class="drawer-wrapper">
        <slot></slot>
      </div>
    </div>
  </Transition>
</template>

<style lang="less" scoped>
.v-enter-active,
.v-leave-active {
  transition: all 0.5s ease;
}

.v-enter-from,
.v-leave-to {
  width: 0rem !important;

}
.pm-drawer {
  width: 36rem;
  height: 100%;
  position: relative;
  overflow: hidden;
  .drawer-wrapper {
    position: absolute;
    right: 0;
    width: 36rem;
    height: 100%;
  }
}
</style>
